<template>
  <div class="main-content">
    <div class="search between">
      <div class="query">
        <el-input style="width: 180px;" placeholder="会员手机号" v-model="params.phone" clearable
          @change="getTable"></el-input>
        <el-input style="width: 180px;" placeholder="订单号" v-model="params.order_sn" clearable
          @change="getTable"></el-input>
        <el-select style="width: 180px;" v-model="params.state" placeholder="订单状态" clearable @change="getTable">
          <el-option label="待支付" value="1" />
          <el-option label="待发货" value="2" />
          <el-option label="待收货" value="3" />
          <el-option label="已收货" value="4" />
          <el-option label="已取消" value="5" />
          <el-option label="已退款" value="6" />
        </el-select>
        <span class="fold" v-show="isFold">
          <el-date-picker v-model="params.time_range" type="datetimerange" range-separator="至" start-placeholder="订单开始时间"
          end-placeholder="订单结束时间" value-format="YYYY-MM-DD HH:mm:ss" @change="getTable" />
          <el-select style="width: 180px;" v-model="params.pay" placeholder="支付方式" clearable @change="getTable">
            <el-option label="微信" value="1" />
          </el-select>
          <el-select style="width: 180px;" v-model="params.client" placeholder="客户端" clearable @change="getTable">
            <el-option label="微信小程序" value="1" />
          </el-select>
        </span>
        <el-button class="ico-button" @click="switchFold" :icon="isFold ? 'ArrowUp' : 'ArrowDown'"></el-button>
      </div>
      <div class="set-group">
        <el-button class="ico-button" @click="refresh">
          <el-icon>
            <Refresh />
          </el-icon>
        </el-button>
      </div>
    </div>
    <div class="table">
      <div class="table-main">
        <el-table :data="table.data" resizable border show-overflow-tooltip max-height="100%" height="100%"
          v-loading="table.load">
          <el-table-column type="expand">
            <template #default="props">
              <div style="padding-left: 50px;">
                <el-table :data="props.row.goods_list" border style="width:1000px">
                  <el-table-column label="图片" prop="name" align="center">
                    <template #default="goods">
                      <img :src="$imgUrl + goods.row.image" style="width: 50px; height: 50px" alt="">
                    </template>
                  </el-table-column>
                  <el-table-column label="名称" prop="name" align="center" />
                  <el-table-column label="单价" prop="price" align="center" />
                  <el-table-column label="数量" prop="count" align="center" />
                  <el-table-column label="属性" prop="mdl" align="center" />
                  <el-table-column label="总价" prop="total_original_price" align="center" />
                </el-table>
              </div>
            </template>
          </el-table-column>
          <template v-for="row in table.column">
            <el-table-column :label="row.label" :prop="row.key" :width="row.width" :align="row.align"
              :fixed="row.fixed">
              <template #default="scope">
                <span>
                  {{ scope.row[row.key] }}
                </span>
              </template>
            </el-table-column>
          </template>
          <el-table-column label="相关操作" column-key="handle" width="120" align="center" fixed="right">
            <template #default="scope">
              <el-button-group>
                <el-button link type="primary" @click="edit(scope.row)">详情</el-button>
                <el-button v-if="scope.row.state == 2" link type="success" @click="openSend(scope.row)">发货</el-button>
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="page">
        <el-pagination v-model:current-page="pages.page" v-model:page-size="pages.page_size"
          :page-sizes="[30, 50, 100, 200, 300, 500]" :small="true" :background="true"
          layout="total, sizes, prev, pager, next" :total="pages.count" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </div>

    <el-dialog v-model="send_visible" title="物流发货" width="300" top="20%">
      <el-form ref="formRef" :model="send_form" :rules="rules">
        <el-form-item label="快递公司" :label-width="express_company" required>
          <el-input v-model="send_form.express_company" autocomplete="off" />
        </el-form-item>
        <el-form-item label="快递单号" :label-width="express_no" required>
          <el-input v-model="send_form.express_no" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="send_visible = false">取消</el-button>
          <el-button type="primary" @click="send">
            提交
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup name="OrderList">

const { proxy } = getCurrentInstance()

// 搜索表单 下拉收起 start 
const isFold = ref(false)
function switchFold() {
  isFold.value = !isFold.value
}
// 搜索表单 下拉收起 end

// 表格字段配置 start
const table = reactive({
  load: false,
  column: [
    { label: '订单号', key: 'order_sn', width: '150', show: true, align: 'center' },
    { label: '会员', key: 'user_phone', width: 'auto', show: true, align: 'center' },
    { label: '订单状态', key: 'state_name', width: 'auto', show: true, align: 'center' },
    { label: '支付方式', key: 'pay_name', width: 'auto', show: true, align: 'center' },
    { label: '总金额', key: 'original_amount', width: 'auto', show: true, align: 'center' },
    { label: '实付金额', key: 'payment_amount', width: 'auto', show: true, align: 'center' },
    { label: '折扣金额', key: 'discount_amount', width: '100', show: true, align: 'center' },
    { label: '优惠券', key: 'coupon_amount', width: 'auto', show: true, align: 'center' },
    { label: '满减金额', key: 'manjian_amount', width: 'auto', show: true, align: 'center' },
    { label: '支付时间', key: 'pay_time', width: '150', show: true, align: 'center' },
    { label: '下单时间', key: 'create_time', width: '150', show: true, align: 'center' },
  ],
  data: []
})
// 表格字段配置 end 

onMounted(() => {
  getTable()
})

// 页面数据 start
const params = reactive({
  order_sn: '',
  phone: '',
  state: '',
  pay: '',
  client: '',
  time_range: ''
})
const pages = reactive({
  page: 1,
  page_size: 30,
  count: 0
})

function handleSizeChange(val) {
  pages.page_size = val
  getTable()
}
function handleCurrentChange(val) {
  pages.page = val
  getTable()
}
function refresh() {
  pages.page = 1
  getTable()
}
async function getTable() {
  table.load = true
  let res = await proxy.$get('OrderList', {
    page: pages.page,
    page_size: pages.page_size,
    ...params
  }, false)
  table.load = false
  if (res.code === 0) {
    table.data = res.data.list || []
    pages.count = res.data.total ? Number(res.data.total) : 0
  }
}

// 页面数据 end

// 增删改 start
function edit(row) {
  proxy.$bus.emit('tabSwitch', { key: 'OrderDetail', query: { order_sn: row.order_sn } });
}
// 增删改 end


// 发货
const send_form = reactive({
  order_sn: '',
  express_no: '',
  express_company: ''
})
const rules = {
  express_no: [{ required: true, message: '请输入名称', trigger: 'blur' }],
  express_company: [{ required: true, message: '请输入账号', trigger: 'blur' }],
};
const send_visible = ref(false)
const formRef = ref();

function openSend(row) {
  send_form.order_sn = row.order_sn
  send_form.express_no = row.express_no
  send_form.express_company = row.express_company
  send_visible.value = true
}
function send() {
  send_visible.value = false
  formRef.value.validate(async (valid) => {
    if (valid) {
      let res = await proxy.$post('OrderSend', send_form)
      if (res.code === 0) {
        ElMessage({ type: 'success', message: '保存成功' });
        getTable()
      }
    }
  });
}
// 发货
</script>
<style scoped>
.read-the-docs {
  color: #888;
}
</style>
